<script setup lang="ts">
import { useReachBottom, useRouter } from "@tarojs/taro";
import ByAvatar from "@/components/ui/ByAvatar.vue";
import ViewList from "@/components/common/ViewList.vue";

import useList from "@/hooks/useList";
import ApiMerchant from "@/api/merchant";
import ByText from "@/components/ui/ByText.vue";

// 商户ID

const { params } = useRouter<{
  // 申请商户
  mid: `${number}`;
}>();

const { loading, list, nextPage } = useList<{
  id: number;
  ticket_sn: string;
  user_id: number;
  merchant_id: number;
  coupon_id: number;
  coupon_name: string;
  verify_time: string;
  remark: string;
  merchant_name: string;
  user_name: string;
  user_avatar: string;
}>(ApiMerchant.getVerifyRecords, {
  search: { merchant_id: +params?.mid },
});

useReachBottom(nextPage);
</script>

<template>
  <ViewList :loading="loading" :is-empty="list.length == 0">
    <view
      v-for="item in list"
      :key="item.id"
      class="flex p-3 rounded-lg m-3 bg-primary-light shadow-lg"
    >
      <view class="flex-auto">
        <view class="text-lg">{{ item.coupon_name }}</view>

        <view class="my-2 flex items-center text-sm">
          <text>顾客:</text>
          <ByAvatar :src="item.user_avatar" :size="36" />
          <text class="px-1">{{ item.user_name }}</text>
        </view>

        <view class="mt-1 text-sm">{{ item.verify_time }}</view>
      </view>

      <view class="flex-none text-center w-1/5">
        <ByAvatar :src="item.user_avatar" />
        <view>
          <ByText :lineClamp="1" class="px-1 text-sm" >{{ item.user_name }}</ByText>
        </view>
      </view>
    </view>

    <!-- <view
      class="flex justify-between m-3 py-2 border-b-1 border-b-light"
      v-for="item in list"
      :key="item.id"
    >
      <view>
        <view class="text-lg">{{ item.coupon_name }}</view>
        <view class="mt-1 text-sm">{{ item.ticket_sn }}</view>
        <view class="mt-1 text-sm text-second">{{ item.verify_time }}</view>
      </view>

      <view class="flex-center">
        <text class="pr-1">{{ item.user_name }}</text>
        <ByAvatar :src="item.user_avatar" />
      </view>
    </view> -->
  </ViewList>
</template>
